<template>
  <div class="works_details">
    <div class="bg_title">
      {{ details.worksTitle }}
    </div>
    <Msg :details="details" />
    <HYTextTitle :title="details.modelName1" :content="details.modelContent1" />
    <HYTextTitle
      style="margin-top: 35px"
      :title="details.modelName2"
      :content="details.modelContent2"
    />
    <HYTextTitle
      style="margin-top: 35px"
      :title="'个人成果展示'"
      :content="details.worksContent"
    />
    <van-button
      @click="handVote()"
      style="width: 100%; margin-top: 20px"
      color="#333"
      >投 票</van-button
    >
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRef, toRefs } from "vue";
import { useRoute } from "vue-router";
import { findWorksOne, worksVote } from "@/utils/apis/home";
import Msg from "./components/Msg.vue";
import HYTextTitle from "@/components/HYTextTitle.vue";
import { openWebUrl } from "@/utils/config";
import { Toast } from "vant";
interface Details {
  recordId: number;
}
export default defineComponent({
  name: "WorksDetails",
  components: {
    Msg,
    HYTextTitle,
  },
  props: {},
  setup() {
    const state = reactive({
      details: {} as Details,
    });
    window.scrollTo(0, 0);
    const route = useRoute();
    const { id } = route.query;

    onMounted(async () => {
      const res = await findWorksOne({ worksId: id });
      state.details = res.data;
    });
    const handHead = () => {
      if (state.details.recordId) {
        window.open(
          `${openWebUrl}personDetail?recordId=${state.details.recordId}`
        );
      }
    };
    const handVote = async () => {
      const res = await worksVote({
        customizeId: 2,
        worksId: id,
      });
      Toast.success(res.data.content);
    };
    return { ...toRefs(state), handHead, handVote };
  },
});
</script>
<style lang="scss" scoped>
.works_details {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 269px);
  padding-bottom: 45px;
  .bg_title {
    color: #000;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .head-box {
    padding: 15px;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .jiantou {
      width: 8px;
      height: 8px;
    }
    .head-l {
      display: flex;
      text-align: left;
      .head-img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .name-box {
        .name {
          font-weight: bold;
          color: #312d2d;
          font-size: 15px;
          margin-bottom: 5px;
        }
        .post {
          color: #808080;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
